import type { ComponentStyleIdType } from '../../types/interfaces'
import type { NotificationOptions } from './types'
import { UIComponent } from '../../lib/abstract'
import { ComponentStyleId } from '../../types/constants'
import { styles } from './styles'

export class ScriptNotification extends UIComponent {
  id: string = 'script-notification'
  readonly description: string = 'GM 脚本通知'
  readonly styleId: string = ComponentStyleId[this.name]

  get name(): ComponentStyleIdType {
    return 'ScriptNotification'
  }

  constructor() {
    super()

    // 注册样式
    this.registerStyles()
  }

  ELEMENT_SELECTORS = {}

  render(): string {
    return ``
  }

  bindEvents(): void {}

  reset(): void {
  }

  show(options: NotificationOptions): void {
    this.showGMNotification(options)
  }

  private showGMNotification(options: NotificationOptions) {
    GM_notification({
      title: options.title || '脚本通知',
      text: options.text,
      tag: options.tag || '',
      image: options.image || '',
      highlight: options.highlight || false,
      silent: options.silent || true,
      timeout: options.timeout || 3000,
      url: options.url,
      onclick: options.onClick,
      ondone: options.onDone,
    })
  }

  getStyles(): string {
    return styles()
  }

  destroy(): void {
    super.destroy()
  }
}
